﻿<UserControl
    x:Name="hostCtl"
    x:Class="CC98.Metro.Controls.ParallaxBackground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CC98.Metro.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ctl="using:CC98.Metro.Controls"
    xmlns:cnv="using:CC98.Xaml.Converters"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    

    
    <Canvas>
        <Image x:Name="img" Source="{Binding ElementName=hostCtl, Path=ImageSource}" Stretch="UniformToFill"
               Width="Auto" Height="{Binding ElementName=hostCtl, Path=ActualHeight}"
               VerticalAlignment="Stretch"  HorizontalAlignment="Left">
            <Image.Resources>
                <cnv:ParallaxConverter x:Name="pcnv"
                               VisualWidth="{Binding ElementName=hostCtl, Path=ActualWidth, Mode=OneWay}" 
                               ImageWidth="{Binding ElementName=img, Path=ActualWidth, Mode=OneWay}" />
            </Image.Resources>
            <Image.RenderTransform>
                <CompositeTransform TranslateX="{Binding ElementName=hostCtl, Path=ScrollOffset, Converter={StaticResource pcnv}}" />
            </Image.RenderTransform>
        </Image>
    </Canvas>
</UserControl>